<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="utf-8"/>
  <title>Food Points</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <meta content="" name="description"/>
  <meta content="" name="author"/>
  <meta name="MobileOptimized" content="320">
  <!-- BEGIN GLOBAL MANDATORY STYLES -->
  <link href="plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
  <link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  <link href="plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
  <!-- END GLOBAL MANDATORY STYLES -->
  <!-- BEGIN THEME STYLES -->
  <link href="css/style-metronic.css" rel="stylesheet" type="text/css"/>
  <link href="css/style.css" rel="stylesheet" type="text/css"/>
  <link href="css/style-responsive.css" rel="stylesheet" type="text/css"/>
  <link href="css/plugins.css" rel="stylesheet" type="text/css"/>
  <link href="css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
  <link href="css/custom.css" rel="stylesheet" type="text/css"/>
  <!-- END THEME STYLES -->
  <link rel="shortcut icon" href="favicon.ico"/>
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
</head>
<body>
  <!-- BEGIN CONTAINER -->
  <div class="page-container">
    <!-- BEGIN CONTENT -->
    <div class="page-content-wrapper">

      <!-- BEGIN PAGE CONTENT-->
      <div class="col-md-12">
        <div class="row">
          <div class="portlet box green ">
            <div class="portlet-body form">
              <h3>Points Wizard</h3>
              <h2>Food Points</h2>
              <h5>Value per 100g:</h5>
              <form class="form-horizontal" role="form" id="food_points" action="" method="POST">
                <div class="form-body">
                  <table class="table-form">
                    <tr>
                      <td>
                        <label for="proteins" class="control-label large-label align-center col-md-12">Proteins</label>
                      </td>
                      <td>
                        <label for="" class="control-label align-center large-label col-md-12">Carbs</label>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <input type="number" onblur="checkvalue(this)" onfocus="inputfocus(this)" value="0" class="square-input large-input" placeholder="Proteins" name="proteins" id="proteins"></td>
                      <td>
                        <input  type="number" onblur="checkvalue(this)" onfocus="inputfocus(this)" value="0" name="carbs" id="carbs" class="square-input large-input" placeholder="Carbs"></td>
                    </tr>
                    <tr>
                      <td>
                        <label for="fat" class="control-label large-label align-center col-md-12">Fat</label>
                      </td>
                      <td>
                        <label for="fibres" class="control-label align-center large-label col-md-12">Fibres</label>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <input  type="number" onblur="checkvalue(this)" onfocus="inputfocus(this)" value="0" id="fat" name="fat" class="square-input large-input" placeholder="Fat"></td>
                      <td>
                        <input  type="number" onblur="checkvalue(this)" onfocus="inputfocus(this)" value="0" class="square-input large-input" id="fibres" name="fibres" placeholder="Fibres"></td>
                    </tr>
                    <tr>
                      <td>
                        <label for="portion" class="control-label large-label align-center col-md-12">Portion</label>
                      </td>
                      <td>
                        <label for="points" class="control-label align-center large-label col-md-12">Points</label>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <input id="portion_size" name="portion_size" type="number" onblur="checkvalue(this)" onfocus="inputfocus(this)" value="0" class="square-input large-input" placeholder="Size" />
                      </td>
                      <td>
                        <input  type="number" onblur="checkvalue(this)" onfocus="inputfocus(this)" value="0" class="square-input large-input" placeholder="Points" readonly="readonly" id="result_in_points_value" />
                      </td>
                    </tr>
                  </table>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <!-- END PAGE CONTENT--> </div>
    <!-- END CONTENT --> </div>
  <!-- END CONTAINER -->
  <!-- BEGIN FOOTER -->
  <div class="footer">
    <div class="footer-inner">2013 © Moon Media.</div>
  </div>
  <!-- END FOOTER -->
  <script src="plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
  <script src="plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
  <script src="plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
  <!-- END CORE PLUGINS -->
  <!-- BEGIN PAGE LEVEL PLUGINS -->
  <script type="text/javascript" src="plugins/jquery-validation/dist/jquery.validate.min.js"></script>
  <script type="text/javascript" src="plugins/jquery-validation/dist/additional-methods.min.js"></script>

  <script type="text/javascript">
    var form1 = $('#food_points');
    /*form1.validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",
        rules: {
            proteins: {
                required: true
            },
            carbs: {
                required: true,
            },
            fat: {
                required: true,
            },
            fibres: {
                required: true
            },
            grams: {
                required: true
            },
            portion_size:{
              required: true,
            }
        },
    });*/

    function checkvalue(e){
      if(e.readOnly) return;
      if(e.value == "") {
        e.value = 0;
      } else if(isNaN(e.value)){
        e.value = 0;
      }
      resultInPointValue();
    }

    function resultInPointValue(){
        //calc value
        var res = (portion_size.value / 100) * ((proteins.value / 10.9375) + (carbs.value / 9.2105) + (fat.value / 3.8889) + (fibres.value /35));
        // round
        var round = Math.round(res, 0);
        result_in_points_value.value = (round > 0) ? round : 0;
        //alert(result_in_points_value.value);
    }
    function inputfocus(e){
      if(e.readOnly) return;
      if(e.value == 0) {
        e.value = '';
      } else {
        //do nothing
      }
    }
  </script>
</body>
</html>